<template>
  <div class="pt-2">
    <div :class="`${prefixCls}__top`">
      <Row :gutter="24">
        <!-- {{ topData }} -->
        <Col
          :span="4"
          :class="`${prefixCls}__top-col mb-6 mt-6`"
          v-for="(item, index) in topData"
          :key="index"
          style="cursor: pointer"
          @click="handleGotoPage(item)"
        >
          <p>{{ item.count }}</p>
          <div class="mt-6">{{ item.title }}</div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script lang="ts" setup name="WorkbenchHeader">
  import { computed, onMounted } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.jpg';
  import { overView } from '/@/api/sys/login';
  import { useGo } from '/@/hooks/web/usePage';
  const prefixCls = 'list-basic';
  const go = useGo();

  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);
  // 获取当前的年月日时分秒
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  // console.log(year, month, day);
  const currentDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

  import { ref } from 'vue';
  const topData = ref<Array<{ title: string; count: number; url: string }>>([
    {
      title: '待备货',
      count: 0,
      url: '/wms/rd/rd32/rdrecord32/jhList',
    },
    {
      title: '待拣货',
      count: 0,
      url: '/wms/jh/pick/jhPickMain/list',  //home  //?jhStatus=0&createDate_gte=\"\"&createDate_lte=\"\"
    },
    {
      title: '待出库',
      count: 0,
      url: '/wms/rd/order/rdOrder/list',  //查询条件状态 未确认
    },
    {
      title: '待入库',
      count: 0,
      url: '/wms/rd/rd10/rdrecord10/list',  //查询条件状态 状态待处理
    },
    {
      title: '待更新物流信息',
      count: 0,
      url: '/wms/rd/order/rdOrder/list',   //物流公司为空
    },
    {
      title: '待推送ERP系统',
      count: 0,
      url: '/wms/rd/order/rdOrder/list',  //推送状态 已确认，是否推送为否
    },
  ]);

  const getOverview = async () => {
    const res = await overView();
    topData.value = topData.value.map(item => {
      const newItem = {...item};
      if (newItem.title === '待备货') {
        newItem.count = res.sumOutbound;
      } else if (newItem.title === '待拣货') {
        newItem.count = res.jhPickNum;
      } else if (newItem.title === '待出库') {
        newItem.count = res.orderUnconfirmSum;
      } else if (newItem.title === '待入库') {
        newItem.count = res.pendNum;
      } else if (newItem.title === '待更新物流信息') {
        newItem.count = res.wlCompanyNullNum;
      } else if (newItem.title === '待推送ERP系统') {
        newItem.count = res.pushIsNoNum;
      }
      return newItem;
    });
  };

  function handleGotoPage(itemProps: { title: string; count: number; url: string }) {
    if (itemProps.title === '待备货') {
      go(itemProps.url);
    }
    if (itemProps.title == '待拣货' || itemProps.title == '待出库' || itemProps.title == '待入库') {
      go(itemProps.url + '?homePage=true');
    }

    if (itemProps.title == '待更新物流信息') {
      go(itemProps.url + '?homePage=true1');
    }

    if (itemProps.title == '待推送ERP系统') {
      go(itemProps.url + '?homePage=true2');
    }
  }

  getOverview();

</script>
<style lang="less" scoped>
  .list-basic {
    &__top {
      background-color: @component-background;
      text-align: center;

      &-col {
        &:not(:last-child) {
          border-right: 1px dashed @border-color-base;
        }

        div {
          margin-bottom: 12px;
          color: @text-color-base;
          font-size: 14px;
          line-height: 22px;
        }

        p {
          font-weight: bold;
          margin: 0;
          color: @text-color-base;
          font-size: 24px;
          line-height: 32px;
        }
      }
    }

    &__content {
      margin-top: 12px;
      padding: 24px;
      background-color: @component-background;

      .list {
        position: relative;
      }

      .icon {
        font-size: 40px !important;
      }

      .extra {
        position: absolute;
        top: 20px;
        right: 15px;
        color: @primary-color;
        font-weight: normal;
        cursor: pointer;
      }

      .description {
        display: inline-block;
        width: 40%;
      }

      .info {
        display: inline-block;
        width: 30%;
        text-align: center;

        div {
          display: inline-block;
          padding: 0 20px;

          span {
            display: block;
          }
        }
      }

      .progress {
        display: inline-block;
        width: 15%;
        vertical-align: top;
      }
    }
  }
</style>
